<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <section>
        <div>
            <p></p>
            <a href=""></a>
        </div>
        <p>
            <a href=""></a>
        </p>
    </section>
</body>
</html>
<!-- 
    网格布局的认识
        属性；display
        属性值:grid
    网格的概念
        - 什么是网格布局；就是将网页划分成网格，组成任意个小的网格
        - 特点:将网页的容器划分成很多小的盒子(网格)，划分成行和列，产生单元格，制定项目的位置
            - 容器指的是section - 父级元素
            - 项目指的是div     - 直接子级元素

    网格和弹性盒做个对比
        - 网格控制的是行和列
        - 弹性盒控制的子元素在轴线上排列方式

    网格布局有很多的属性，可以加在父级元素也可以加在子级元素
 -->